<template>
  <div class="container fixed upgrade backgroundColor">
    <Header content="特权" :showBack="true"></Header>
    <div style="padding:20px 14px; 34px;">
      <div class="flexLeft">
        <img src="../assets/image/user.png" alt="" style="width: 56px;margin-right: 13px;">
        <div>
          <div style="font-weight: bold;margin-bottom: 6px;">{{userInfo.nickname}}</div>
          <div>
            <img src="../assets/image/V0@2x.png" alt="" style="width: 79px;" v-if="userInfo.level == 0">
            <img src="../assets/image/V1@2x.png" alt="" style="width: 79px;" v-if="userInfo.level == 1">
            <img src="../assets/image/V2@2x.png" alt="" style="width: 79px;" v-if="userInfo.level == 2">
            <img src="../assets/image/V3@2x.png" alt="" style="width: 79px;" v-if="userInfo.level == 3">
          </div>
        </div>
      </div>
      <div style="color:#828282;margin-top: 25px;" class="font15">
        当前特权
      </div>
      <div class="font15">
        可从你的直属好友获得3%的代币奖励
      </div>
    </div>
    <div style="background: #FAFBFD;padding-left:15px;height: 30px;line-height: 30px;color:#C3C3C3" class="font14">
      推荐开通特权
    </div>
    <ul>
      <li style="padding: 17px 20px;border-bottom: 1px solid #F5F5F5;">
        <div class="flexBetween">
          <img src="../assets/image/V1@2x.png" alt="" style="height:33px;">
          <x-button
            type="primary"
            mini="mini"
            @click.native="open(1)"
            :disabled="userInfo.level>=1"
            style="margin: 0;border: none;width:70px;padding:0;">
            {{userInfo.level>=1?'已开通':'开通'}}
          </x-button>
        </div>
        <div style="margin-top: 10px;color:#828282;background: #FAFAFA;border-radius: 3px;padding: 10px;" class="font12">
          省级代理可从你的直属好友获得3%的代币奖励。&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;
        </div>
      </li>
      <li style="padding: 17px 20px;border-bottom: 1px solid #F5F5F5;">
        <div class="flexBetween">
          <img src="../assets/image/V2@2x.png" alt="" style="height:33px;">
          <x-button
            type="primary"
            mini="mini"
            :disabled="userInfo.level>=2"
            @click.native="open(2)"
            style="margin: 0;border: none;width:70px;padding:0;">
            {{userInfo.level>=2?'已开通':'开通'}}
          </x-button>
        </div>
        <div style="margin-top: 10px;color:#828282;background: #FAFAFA;border-radius: 3px;padding: 10px;" class="font12">
          省级代理可从你的直属好友获得3%的代币奖励，并且从直属好友的所有下级获得3%。
        </div>
      </li>
      <li style="padding: 17px 20px;border-bottom: 1px solid #F5F5F5;">
        <div class="flexBetween">
          <img src="../assets/image/V3@2x.png" alt="" style="height:33px;">
          <x-button
            type="primary"
            mini="mini"
            :disabled="userInfo.level>=3"
            @click.native="open(3)"
            style="margin: 0;border: none;width:70px;padding:0;">
            {{userInfo.level>=3?'已开通':'开通'}}
          </x-button>
        </div>
        <div style="margin-top: 10px;color:#828282;background: #FAFAFA;border-radius: 3px;padding: 10px;" class="font12">
          省级代理可从你的直属好友获得3%的代币奖励，并且从直属好友的所有下级获得3%，从直属好友下级的直属获得2%
        </div>
      </li>
    </ul>
    <Exchangewd
      @closeDialogExchange="closeDialogExchange"
      @close="close"
      @inputExchangePwd="inputExchangePwd"
      :showDialogStyle="showDialogStyle"
    >
      <div class="center">
        捐献{{amount}} LTY成为县级代理
      </div>
      <group class="login" style="margin-top: 40px;">
        <x-input placeholder="请输入交易密码" style="background: #ffffff;" class="font14" @input="inputExchangePwd" v-model="pwd" :max="6" type="password"></x-input>
      </group>
      <div style="margin: 11px 0 10px;" class="login">
        <x-button type="primary" :disabled="upgradeDisabled" @click.native="buy">开通</x-button>
      </div>
    </Exchangewd>
  </div>
</template>
<script>
import Header from './common/header.vue'
import Exchangewd from './common/exchangePwd.vue';
import { Group, Cell,XInput,XButton  } from 'vux';
export default{
  data(){
    return {
      userInfo:'',
      showDialogStyle:false,
      pwd:'',
      upgradeDisabled:true,
      amount:'',
      seleLevel:''
    }
  },
  methods:{
    closeDialogExchange(){
      this.pwd = '';
      this.close()
    },
    inputExchangePwd(){
      if(this.pwd.length==6){
        this.upgradeDisabled = false;
      }else{
        this.upgradeDisabled = true;
      }
    },
    close(){
      this.showDialogStyle = false;
    },
    open(level){
      this.up_amount(level);
      this.showDialogStyle = true;
      this.seleLevel = level
    },
    buy(){
      this.upgradeDisabled = true
      this.service('buy',{
        currency_id:this.currencyInfo.currency_id,
        level:this.seleLevel,
        asset_password:this.pwd
      },'post').then(res=>{
        this.upgradeDisabled = false;
        if(res.code == 200){
          this.showDialogStyle = false;
          this.pwd = '';
          this.$store.dispatch('info').then((res)=>{
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            console.log(this.userInfo)
          });
        }else{
          this.toastFn(res.msg);
        }
      })
    },
    up_amount(level){
      this.service('up_amount',{
        level:level,
        currency_id:this.currencyInfo.currency_id
      },'post').then(res=>{
        console.log(res);
        if(res.code == 200){
          this.amount = res.data.amount
        }else{
          this.toastFn(res.msg);
        }
      })
    }
  },
  created(){
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    if(sessionStorage.getItem('accountsList')){
      this.currencyInfo = JSON.parse(sessionStorage.getItem('accountsList'));
    }else{
      this.$store.dispatch('accounts').then(res=>{
        this.currencyInfo = JSON.parse(sessionStorage.getItem('accountsList'));
      });
    }
  },
  components:{
    Header,
    Exchangewd,
    Group,
    Cell,
    XInput,
    XButton
  }
}
</script>
<style>
  .upgrade .weui-btn.weui-btn_disabled.weui-btn_mini.weui-btn_primary{
    background: #FAFAFA;
    color:#C3C3C3;
    border:none;
  }
</style>
